<template>
  <div style="position: fixed;z-index: 100;">
    <PopUp :popupOption="popupData"></PopUp>
    <TitleLenged
      :isShow="isShowTitle"
      :titleText="titleText"
    ></TitleLenged>
    <MapLenged  :isShow="isShowLenged"
      :lengedData="lengedData"></MapLenged>

    <CostomProgress
      :title="c_title"
      :modal2Visible="c_visable"
      :percent="c_percent"
    ></CostomProgress>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
import PopUp from './PopUp';
import TitleLenged from '../mainContent/TitleLenged.vue';
import MapLenged from '../mainContent/MapLenged.vue';
import CostomProgress from '../progress/index.vue';
let config = require('../../config/config');
let lenged_config = require('../../config/lengedConfig');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'R10105',
  computed: {
    ...mapGetters(['map', 'contentHeight'])
  },
  data() {
    return {
      //传递到弹窗组件中的数据
      popupData: {},
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //是否显示图例
      isShowLenged:false,
      //图例内容
      lengedData:[],
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,
      //土地利用本地数据
      mineLocalData: null
    };
  },
  components: {
    TitleLenged,
    CostomProgress,
    PopUp,
    MapLenged
  },
  mounted: function() {
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
      this.c_title = '加载中';
      this.c_visable = true;

      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      let markerMap = mapOper.addMarker(markerSetting);
      this.changeMap({ map: markerMap });

      //加载矿区wfs图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=landuse&OUTPUTFORMAT=json',
        successFunc: response => {
          let that = this;
          that.mineLocalData = response.data;
          console.log(response.data);
          //console.log(response.data.features.lengh);
          let all_features = _.forEach(response.data.features, function(item) {
            item.properties.yijidm = item.properties.dlbm.substr(0, 2);
          });
          //   let f_features = _.uniqBy(all_features, function(item) {
          //     return item.properties.yijidm;
          //   });
          // console.log(f_features);
          let customData={
            type: 'FeatureCollection',
            name: 'landuse',
            features: all_features
          };
          let style = mapOper.getGeoJsonStyle('landuse');
          let wfsParams = {
            map: that.map,
            jsonData: customData,
            style: style,
            styleFunc: function(feature) {
              var clsval = feature.get('yijidm');
              return style[clsval];
            },
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);
                //console.log(feature + '--' + feature.get('applicant'));

                let extents = feature.getGeometry().getExtent();
                let popset = {
                  map: that.map,
                  coordinate: [
                    (extents[2] + extents[0]) / 2,
                    (extents[3] + extents[1]) / 2
                  ]
                };

                that.popupData = {
                  display: 'block',
                  contentType: 'landuse',
                  Title: feature.get('dlmc'),
                  DLMC: feature.get('dlmc'),
                  QSXZ: feature.get('qsxz'),
                  QSDWMC: feature.get('qsdwmc'),
                  TBMJ: Number(feature.get('tbmj')),
                  GDLX: feature.get('gdlx'),
                  SJNF: feature.get('sjnf')
                };
                mapOper.showPopUp(popset);

                let zoomparams = {
                  map: that.map,
                  center: popset.coordinate,
                  zoom: 8
                };
                mapOper.ZoomAndCenter(zoomparams);
              } else {
                that.popupData = { display: 'none' };
              }
            }
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });
          that.c_title = '加载中';
          that.c_visable = false;
          this.isShowTitle = true;

          this.titleText = '乌海土地利用数据';
          //
          this.isShowLenged=true;
          this.lengedData=lenged_config.LandUseLenged;
        }
      };
      commonOper.HttpGet(params);
    } else {
      this.$router.push({
        //核心语句
        path: 'R101.html' //跳转的路径
      });
    }
  },
  methods: {
    ...mapActions(['changeMap', 'changeLengedTitle'])
  }
};
</script>

